<template>
  <div class="Zone">
      <!-- 会员专区 -->
      <div class="content-width content-width-min learn-list-container">
        <div class="vip-header-container">
          <p class="vip-title">会员专区</p>
          <div class="content">
            <div class="creator avatar">
              <div class="avatar notshowname">
                <img
                    :src="userInfo.avatar? userInfo.avatar:'https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1'"
                    class="imgList"
                />
              </div>
            </div>

            <div class="vip-mid">
              <div class="vip-user">
                <div class="name">
                  {{userInfo.account? userInfo.account:'xxxxxxx'}}
                  <router-link to="/mine/vip" class="level_box medium" style="margin-left: 8px">
                    <i class="lv"></i>
                    <i class="lv1"></i>
                  </router-link>
                </div>
                <div class="vip-tip">开通会员尊享10大特权</div>
              </div>
              <div class="right-item">
                <router-link to="/mine/vip">
                  <span
                    class="icon"
                    data-src="https://rs.dance365.com/teach_video_free.png"
                    style="
                    background-image: url(https://rs.dance365.com/teach_video_free.png);
                  "
                ></span>
                  <p>以下<i>715</i>个会员专区课程<br />全部免费学习</p></router-link>

              </div>
              <div class="right-item">
                <router-link to="/mine/vip">
                   <span
                       class="icon"
                       data-src="https://rs.dance365.com/member_preferential.png"
                       style="
                    background-image: url('https://rs.dance365.com/member_preferential.png');
                  "
                   ></span>
                  <p>购买非会员专区课程 <br />可获会员立减优惠</p>
                </router-link>
              </div>
              <div>
                <button
                    type="button"
                    class="el-button vip-fee-button el-button--primary el-button--small"
                >
                  <router-link to="/mine/wallet" :style="{color:'#fff'}">立即开通</router-link>
                </button>
                <router-link to="/mine/wallet" class="more-right">查看/开通 ></router-link>
              </div>
            </div>
          </div>
        </div>
      </div>
  </div>

</template>

<script lang="ts">
import {defineComponent} from "vue";

export default defineComponent({
  name: "vipzone",
});
</script>

<script setup lang="ts">
import {useUserInfoStore} from '@/stores/user/user'
import {storeToRefs} from "pinia";

const {userInfo} = storeToRefs(useUserInfoStore())
console.log('lklk',userInfo)
</script>

<style scoped lang="scss">
.Zone {
  background-color: #f5f7f9;
  .el-button {
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: #fff;
    border: 1px solid #dcdfe6;
    text-align: center;
    box-sizing: border-box;
    outline: none;
    margin: 0;
    transition: 0.1s;
    font-weight: 500;
  }

  //会员专区
  .content-width {
    padding-top: 0px;
    padding-top: 0px;
    padding-right: 0px;
    width: 1200px;
margin: 0 auto;
    .vip-header-container {
      color: #111;
      background-color: #fff;
      margin-top: 15px;
      margin-bottom: 10px;
      border-radius: 4px;
      padding: 20px 30px 16px;
      .vip-title {
        font-size: 16px;
        margin: 0 0 16px;
        font-weight: 400;

      }
      .content {
        position: relative;
        min-height: 50px;
        display: flex;
        -webkit-box-align: center;
        align-items: center;
        .avatar {
          margin-right: 10px;
          width: 50px;
          height: 50px;
          .notshowname {
            margin-right: 0px;
            .imgList {
              background-image: url("https://rs.dance365.com/default_head@3x.png?imageView2/0/w/100/h/100/format/webp/ignore-error/1");
              width: 100% !important;
              height: 100% !important;
              border-radius: 360%;
            }
          }
        }
        .creator {
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          text-decoration: none;
          cursor: pointer;
        }
        .vip-mid {
          -webkit-box-flex: 1;
          flex: 1;
          display: flex;
          -webkit-box-align: center;
          align-items: center;
          .vip-user {
            position: relative;
            min-width: 220px;
            ::before {
              content: "";
              height: 40px;
              border-left: 1px solid #dee2e6;
              position: absolute;
              top: 50%;
              right: 0;
              transform: translateY(-50%);
            }
            .name {
              padding-top: 4px;
              font-size: 16px;
              .level_box {
                box-sizing: border-box;
                background: linear-gradient(#ff289b, #ff43d0);
                border: 1px solid #fff;
                border-radius: 4px;
                padding: 0 8px;
                display: inline-block !important;
                line-height: 1.15;
                white-space: nowrap;
                cursor: pointer;
                i {
                  display: inline-block;
                  background-size: 100%;
                  background-repeat: no-repeat;
                  width: 8px;
                  height: 10px;
                }
                .lv {
                  width: 15px;
                  height: 10px;
                  background-image: url("https://rs.dance365.com/level_Lv.@3x.png");
                }
                .lv1 {
                  background-image: url("https://rs.dance365.com/level_num_1@3x.png");
                }
              }
            }
            .vip-tip {
              margin-top: 8px;
              font-size: 12px;
              color: #f93684;
            }
          }

          .right-item {
            -webkit-box-flex: 1;
            flex: 1;
            text-align: center;
            cursor: pointer;
            span {
              width: 58px;
              height: 58px;
              display: inline-block;
              background-size: 100%;
              vertical-align: middle;
              margin-right: 30px;
            }
            .icon {
              overflow: visible;
              fill: currentColor;
              // margin-top: 20px;
            }
            p {
              display: inline-block;
              vertical-align: middle;
              i {
                font-style: normal;
                color: #f93684;
              }
            }
          }
        }
        .vip-fee-button {
          border-radius: 20px;
          display: block;
          margin-bottom: 8px;
        }
        .el-button--small {
          //padding: 9px 15px;
          font-size: 12px;
        }
        .el-button--primary {
          color: #fff;
          background-color: #f93684;
          border-color: #f93684;
        }
        .more-right {
          color: #7d8090;
          font-size: 12px;
        }
      }
    }
  }
}

</style>
